const echarts = require('../../static/echarts.min')

//折线图配置
export const lineOption = {
	legend: {
		show: true,
		data: [] as any[],
	},
	tooltip: {
		show: true,
		trigger: 'axis',
		confine: true,
		axisPointer: {
			type: 'line',
			snap: true
		},
		textStyle: {
			textShadowColor: "transparent",
			textShadowBlur: 5,
		}
	},
	grid: {
		left: '8%',
		right: '5%',
		top: '20%',
		bottom: '5%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		axisTick: {
			show: true,
			inside: true
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: '#707070'
			}
		},
		axisLabel: {
			type: 'category',
			data: [],
			rotate: 30,
			textStyle: {
				color: "#A8ADCF"
			}
			
		}
	},
	yAxis: {
		type: 'value',
		name: "",
		nameTextStyle: {
			color: "#A8ADCF"
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: '#707070'
			}
		},
		axisLabel: {
			textStyle: {
				color: "#A8ADCF"
			}
		},
		splitLine: {
			show: true,
			lineStyle: {
				type: 'dashed',
				color: 'rgba(112, 112, 112, 0.2)'
			}
		}
	},
	dataset: {
		source: [] as any[],
	},
	series: [
		{
			type: "line",
			smooth: true,
			symbol: 'circle',
			symbolSize: 5,
			itemStyle: {
				// 设置symbol的颜色
				normal: {
					color: '#251c5f',
					borderColor: '#35adfd',
					borderWidth: 1,
				}
			}
			,
			lineStyle: {
				color: "#35ADFD",
				width: 1.5,
			},
			areaStyle: {
				show: true,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgba(24, 144, 255, 1)'
					},
					{
						offset: 0.6,
						color: 'rgba(24, 144, 255, 0.6)'
					},
					{
						offset: 1,
						color: 'rgba(24, 144, 255, 0.1)'
					}
				])
			},
		}
	],
	color: ['#83bff6']
}
// 柱状图配置
export const barOption = {
	legend: {
		show: true,
		data: [] as any[],
	},
	tooltip: {
		show: true,
		trigger: 'axis',

		axisPointer: {
			type: 'line',
			snap: true
		},
		textStyle: {
			textShadowColor: "transparent",
			textShadowBlur: 5,
		}
	},
	grid: {
		left: '3%',
		right: '5%',
		top: '20%',
		bottom: '5%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		// boundaryGap: false,
		axisTick: {
			show: true,
			inside: true
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: '#707070'
			}
		},
		axisLabel: {
			textStyle: {
				color: "#A8ADCF"
			},
			formatter: function (params) {
				// console.log('formatter', params, params.length)
				var newParamsName = ''// 最终拼接成的字符串
				var paramsNameNumber = params.length// 实际标签的个数
				var provideNumber = 10// 每行能显示的字的个数
				// 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
				if (paramsNameNumber > provideNumber) {
					// ********重点在这里********
					newParamsName = params.substring(0, 10) + '..'// 最终拼成的字符串
				} else { // 将旧标签的值赋给新标签
					newParamsName = params
				}
				// 将最终的字符串返回
				return newParamsName
			}
		}
	},
	yAxis: {
		type: 'value',
		name: "",
		nameTextStyle: {
			color: "#A8ADCF"
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: '#707070'
			}
		},
		axisLabel: {
			textStyle: {
				color: "#A8ADCF"
			}
		},
		splitLine: {
			show: true,
			lineStyle: {
				type: 'dashed',
				color: 'rgba(112, 112, 112, 0.2)'
			}
		}
	},
	dataset: {
		source: [] as any[],
	},
	series: [
		{
			type: "bar",
			barWidth: 'auto',
			itemStyle: {
				show: true,

				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgba(37, 162, 144, 1)'
					},
					{
						offset: 0.6,
						color: 'rgba(37, 162, 144, 0.4)'
					},
					{
						offset: 1,
						color: 'rgba(37, 162, 144, 0.1)'
					}
				])
			},
		}
	],
	color: ['#83bff6']
}


// 饼图配置
export const pieOption = {
	color: ['#a62da8', "#595ede", "#e09f31", "#4ac1e2", "#9dff86"],
	tooltip: {
		trigger: 'item',
		show: false
	},
	legend: {
		// type: "scroll",
		right: 20,
		top: '20%',
		orient: 'rect',
		itemWidth: 6,
		itemHeight: 6,
		icon: "circle", // 图例图形
		itemGap: 20,

		textStyle: {
			color: "#fff"
		}
	},
	dataset: {
		source: [] as any[]
	},
	series: [
		{
			type: 'pie',
			radius: ['37%', '50%'],
			center: ['25%', '50%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'outside',
				formatter: '{d}%',
			},
		}
	]
}

// 雷达图

export const radarChart = {


	tooltip: {
		show: false,
		trigger: 'item',
	},
	color: ['#244ab7', '#244ab7'],
	legend: {
		icon: 'roundRect',
		// left: '47%',
		top: '90%',
		show: false,
		padding: [3, 5],
		// right: '50',
		y: '1',
		center: 0,
		itemWidth: 20,
		itemHeight: 10,
		itemGap: 26,
		z: 3,
		// orient: 'horizontal',
		data: ['男', '女'],
		textStyle: {
			fontSize: 12,
			color: '#F1F7FF',
		},
	},
	radar: {
		center: ['50%', '50%'], // 外圆的位置
		radius: '55%',
		name: {
			textStyle: {
				color: '#fff',
				fontSize: 12,
				fontWeight: 400,
				fontFamily: 'PingFangSC-Regular,PingFang SC',
				// fontStyle: 'italic',
			},
		},
		// TODO:
		indicator: [] as any[],
		splitArea: {
			// 坐标轴在 grid 区域中的分隔区域，默认不显示。
			show: true,
			areaStyle: {
				// 分隔区域的样式设置。
				color: ['#30237c', '#30237c', '#30237c', '#30237c', '#30237c'], // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
			},
		},
		axisLine: {
			// 指向外圈文本的分隔线样式
			lineStyle: {
				color: 'rgba(255,255,255,0.2)',
			},
		},
		splitLine: {
			lineStyle: {
				type: 'solid',
				color: ['#1781BA', '#1781BA'], // 分隔线颜色
				width: 1, // 分隔线线宽
			},
		},
	},
	series: [
		{
			type: 'radar',
			symbolSize: 5,
			data: [
				{
					// TODO:
					value: [],
					name: '男',
					areaStyle: {
						normal: {
							color: {
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
									offset: 0, color: 'rgba(46,203,255, 0.14)', // 0% 处的颜色
								},
								{
									offset: 0.15, color: 'rgba(46,203,255, 0.14)', // 100% 处的颜色
								},
								{
									offset: 0.75, color: '#057FB3', // 100% 处的颜色
								},
								{
									offset: 1, color: '#078DC6', // 100% 处的颜色
								}],
								global: false, // 缺省为 false
							},
						},
					},
					itemStyle: { // 折线拐点标志的样式。
						normal: { // 普通状态时的样式
							lineStyle: {
								width: 1,
							},
							opacity: 0.3,
						},
						emphasis: { // 高亮时的样式
							lineStyle: {
								width: 5,
							},
							opacity: 0,
						},
					},
				}
			],
		}
	],

}